<template>
  <h2>添加会员等级</h2>
  <table class="table-bordered" border="1">
    <tr>
      <td>会员等级名称:</td>
      <td>
        <input type="text" placeholder="请输入会员等级名称"  v-model="Rank.rank_Name"/>
      </td>
    </tr>
    <tr>
      <td>会员等级状态:</td>
      <td>
        <input type="radio" name="state" :value="true"  v-model="Rank.rank_State" />启用
        <input type="radio" name="state" :value="false"  v-model="Rank.rank_State" />禁用
      </td>
    </tr>
    <tr>
      <td>最小成长值:</td>
      <td>
        <input type="text" placeholder="请输入最小成长值" v-model="Rank.rank_MinPoint" />
      </td>
    </tr>
    <tr>
      <td>最大成长值:</td>
      <td>
        <input type="text" placeholder="请输入最大成长值" v-model="Rank.rank_MaxPoint"  />
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" class="btn btn-primary" value="添加会员等级信息"  @click="AddMemberRank"/>
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref } from "vue";
import axios from "axios";


// 创建响应式数据
const Rank = ref({
  rank_Id: 0,
  rank_Name: "",
  rank_State: true,
  rank_MinPoint: 0,
  rank_MaxPoint: 0,
});

// 添加会员等级信息
const AddMemberRank = () => {

    // 验证会员等级不能为空
    if (Rank.value.rank_Name == "") {
      alert("会员等级名称不能为空");
      return;
    }

    // 验证最小成长值和最大成长值区间验证
    if (Number(Rank.value.rank_MinPoint) <= 0 || Number(Rank.value.rank_MaxPoint) >=999990) { 

        alert('最下成长值和最大成长值区间为0-999999');
        return;
    }
   
    axios.post('https://localhost:7071/api/MemberRank/AddMemberRank', Rank.value)
        .then(res => {
            if (res.data > 0) {
            alert('会员等级添加成功');
            }
            else if (res.data == -1) {
            alert('会员等级名称已存在');
            }
            else {
            alert('会员等级添加失败');
        }
        })
        .catch(error => {
            console.log(error);
    })
}
</script>

<style scoped>
</style>